<template>
  <div class="industry">
    <NavBar
      :title="industry.name"
      :leftArrow="true"
      :clickLeft="() => $router.replace('/home')"
    />
    <div class="top-wrap">
      <video
      :poster="industry.image"
        ref="topVideo"
        class="top-video"
        src="https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/video/dbn79lhn1g213uid3rmp0cgtrb.mp4"
      ></video>
      <div v-if="topVideoStatus" class="top-mask" @click="playTopVideo">
        <img src="../../../../assets/images/play.png" alt="" />
      </div>
    </div>
    <div class="middle-wrap">
      <h4>{{ industry.name }}</h4>
      <div>{{ industry.propagate1 }} {{ industry.propagate2 }}</div>
    </div>
    <div class="bottom-wrap">
      <template v-for="(item, index) in industry.inspection">
        <div class="bottom-item-wrap" :key="index">
          <div
            class="item-image"
            data-ratio="16:9"
            @click="handlePlay(item.video)"
          >
            <div class="content">
              <img class="item-image-bg" :src="item.image" alt="" srcset="" />
              <img
                class="item-image-play"
                src="../../../../assets/images/play.png"
                alt=""
              />
            </div>
            <!-- <video
              ref="bottomVideo"
              class="bottom-video"
              :src="item.video"
            ></video>
            <div
              v-if="item.bottomVideoStatus"
              class="bottom-mask"
              @click="playBottomVideo(index)"
            >
              <img src="../../../../assets/images/play.png" alt="" />
            </div> -->
          </div>

          <div class="bottom-info">
            <div>{{ item.name }}</div>
            <div class="bottom-point">
              <div>
                <span style="color: rgba(255, 89, 28, 0.8)">{{
                  item.price
                }}</span>
                积分/{{ typeMap[item.type] }}
              </div>
              <div
                v-show="token && userInfo && userInfo.isOrder == 1"
                class="btn"
                @click="$router.push(`/create/${id}/${item.id}`)"
              >
                下 单
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>

    <div class="shade" v-show="show" @click="hiddenShade">
      <video
        ref="video"
        class="video"
        :src="videoUrl"
        autoplay
        controls
      ></video>
    </div>

  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { GetIndustryView } from "@/api/home";
import NavBar from "@/components/NavBar";

export default {
  name: "industry",
  components: {
    NavBar,
  },
  computed: {
    ...mapGetters(["token", "userInfo"]),
    // isOrder: () => {
    //   return this.userInfo.isOrder === 1
    // }
  },
  data() {
    return {
      id: undefined,
      topVideoStatus: true,
      industry: {},
      show: false,
      videoUrl: "",
      typeMap: {
        1: "巡检点",
        2: "巡检线",
        3: "巡检面",
      },
    };
  },
  methods: {
    async initInfo() {
      const id = this.$route.params.id;
      let resp = await GetIndustryView(id);
      if (resp.status === 1) {
        if (resp.data.inspection.length > 0) {
          resp.data.inspection.forEach((item) => {
            item.bottomVideoStatus = true;
          });
        }
        this.$nextTick(() => {
          this.industry = resp.data;
        });
      }
    },
    playTopVideo() {
      if (this.$refs.topVideo.paused) {
        this.$refs.topVideo.play();
        this.$refs.topVideo.controls = true;
        this.topVideoStatus = false;
      }
    },
    playBottomVideo(index) {
      if (this.$refs.bottomVideo[index].paused) {
        this.$refs.bottomVideo[index].play();
        this.$refs.bottomVideo[index].controls = true;
        this.industry.inspection[index].bottomVideoStatus = false;
      }
    },
    handlePlay(url) {
      this.show = true;
      this.videoUrl = url;
      this.$refs.video.currentTime = 0;
      this.$nextTick(() => {
        this.$refs.video.play();
      });
    },
    hiddenShade() {
      this.$refs.video.pause();
      this.show = false;
    },
  },
  mounted() {
    this.id = this.$route.params.id;
    this.initInfo();
    // console.log('token', this.token)
    // console.log('userInfo', this.userInfo)
  },
};
</script>

<style lang="scss" scoped>
html {
  background: #f5f5f5;
}
.industry {
  text-align: center;
  .top-wrap {
    position: relative;
    background: #000;
    .top-video {
      height: 4.8rem;
      width: 100%;
    }
    .top-mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4.8rem;
      line-height: 4.8rem;
      background: rgba(1, 1, 1, 0.5);
    }
  }
  .middle-wrap {
    text-align: left;
    background: #fff;
    padding: 0.106667rem 0.213333rem;
    h4 {
      margin: 0 0 0.066667rem;
      font-size: 0.3rem;
    }
    div {
      color: #666;
      font-size: 0.2rem;
    }
  }
  .bottom-wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .bottom-item-wrap {
      position: relative;
      padding: 5px 10px;
      width: 30%;
      .item-image {
        position: relative; /*因为容器所有子元素需要绝对定位*/
        height: 0; /*容器高度是由padding来控制，盒模型原理告诉你一切*/
        width: 100%;
        &[data-ratio="16:9"] {
          padding-top: 56.25%;
        }
        &aspectration[data-ratio="4:3"] {
          padding-top: 75%;
        }
        cursor: pointer;
        .item-image-bg {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
        }
        .item-image-play {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
      .bottom-video {
        height: 1.466667rem;
        width: 100%;
      }
      .bottom-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1.466667rem;
        line-height: 1.466667rem;
        background: rgba(1, 1, 1, 0.5);
        img {
          width: 0.266667rem;
          height: 0.266667rem;
        }
      }
      .bottom-info {
        padding: 0.093333rem;
        text-align: left;
        font-size: 0.2rem;
        .bottom-point {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .btn {
            border: 1px solid #48a1fa;
            color: #48a1fa;
            line-height: 0.32rem;
            width: 0.746667rem;
            border-radius: 0.55467rem;
            text-align: center;
            font-size: 0.17rem;
          }
        }
      }
    }
  }
}

.shade {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 99;
  .video {
    width: 100%;
    margin: auto;
  }
}

.video-dialog {
  width: 500px;
  height: 400px;
  /deep/ .van-dialog__content {
    width: 500px;
    height: 281.5px;
  }
  .video {
    width: 100%;
    height: 100%;
  }
}

@media screen and (max-width: 750px) {
  .industry {
    .bottom-wrap {
      .bottom-item-wrap {
        width: 50%;
      }
    }
  }
}
@media screen and (min-width: 1025px){
  .shade{
    .video {
    width: 70%;
    margin: auto;
    border-radius: 5px;
    box-shadow: 0 0 10px black;
  }
  }
  
}
// @media screen and (min-width: 1170px) {
//   .industry {
//     .bottom-wrap {
//       .bottom-item-wrap {
//         width: 25%;
//       }
//     }
//   }
// }

</style>